<template>
  <div class="album">
    <button @click="isShow = true">浏览图片</button>
    <mala-album :visiable="isShow" @close="isShow = false" :imgList="imgList" />
  </div>
</template>

<script setup>
import { ref } from "vue"
import img1 from "../assets/images/七宫智音01.jpg"
import img2 from "../assets/images/七宫智音02.jpg"
import img3 from "../assets/images/七宫智音03.jpg"
import img4 from "../assets/images/时崎狂三01.jpg"
import img5 from "../assets/images/时崎狂三02.jpg"
import img6 from "../assets/images/时崎狂三03.jpg"
import img7 from "../assets/images/薇尔莉特01.jpg"
import img8 from "../assets/images/薇尔莉特02.jpg"
import img9 from "../assets/images/薇尔莉特03.jpg"

const imgList = [
  img1,
  img2,
  img3,
  img4,
  img5,
  img6,
  img7,
  img8,
  img9
]
// 组件状态
const isShow = ref(false)
</script>

<style scoped>
</style>
